<template>
  <div>
    <ul class="container mt50 ml50">
      <li v-for="item in imgList" :key="item.id" class="fl item mr20 mb10">
        <div class="item-container" @click="edit(item.id, item.interface_name)">
          <img class="img" :src="item.url" :fit="fit" />
        </div>
        <p class="game-name">{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      imgList: [],
      fit: 'contain',
    };
  },
  created() {
    this.getGameList();
  },
  mounted() {},
  methods: {
    edit(id, name) {
      this.$router.push({
        path: '/fyEdit',
        query: {
          id: id,
          name: name,
        },
      });
    },
    getGameList() {
      this.$api.gameList().then(res => {
        if (res.code == 0) {
          this.imgList = res.data;
          this.imgList.map(item => {
            item.url = `http://static.tonnn.com/promotion/fy/static/images/fy1/${item.interface_name}/${item.interface_name}-1.png`;
          });
        }
      });
    },
  },
};
</script>
<style lang='stylus' scoped>
.container {
  overflow: hidden;

  .item {
    width: 194px;
    height: 134px;

    .item-container {
      width: 194px;
      height: 104px;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 194px;
      }
    }

    .game-name {
      color: #666;
      font-size: 14px;
      line-height: 34px;
    }
  }
}
</style>
